<template>
	<view class="j-balance">
		<view class="j-b-t-box">
			<!-- 余额总金额 -->
			<view class="j-b-total">
				<view class="j-b-t-title">余额(元)</view>
				<view class="j-b-t-value">
					<view class="j-b-t-v-price">￥{{ balanceInfo.totalAmount ? balanceInfo.totalAmount : '0.00' }}</view>
					<view class="j-b-t-v-ope">
						<!-- <view class="j-b-t-v-o-btn" @click="toRecharge">充值</view> -->
						<view class="j-b-t-v-o-btn" @click="toWithdrawal">提现</view>
					</view>
				</view>
			</view>
			<!-- 余额账单 -->
			<view class="j-b-bill">
				<view class="j-b-r">
					<view class="j-b-r-title">
						<view class="j-b-r-division"></view>
						<view class="j-b-r-text">余额账单</view>
					</view>

					<view class="j-b-r-row" v-for="(item, index) in balanceInfo.record" :key="index">
						<view class="j-b-r-describe">
							<view class="j-b-r-text">{{ item.title }}</view>
							<view class="j-b-r-val">
								<template v-if="item.changeType == 1">
									+
								</template>
								<template v-if="item.changeType == 2">
									+
								</template>
								<template v-if="item.changeType == 3">
									+
								</template>
								<template v-if="item.changeType == 4">
									+
								</template>
								<template v-if="item.changeType == 5">
									+
								</template>
								<template v-if="item.changeType == 6">
									+
								</template>
								<template v-if="item.changeType == 7">
									+
								</template>
								<template v-if="item.changeType == 8">
									+
								</template>
								<template v-if="item.changeType == 9">
									+
								</template>
								<template v-if="item.changeType == 10">
									-
								</template>
								<template v-if="item.changeType == 11">
									-
								</template>
								<template v-if="item.changeType == 12">
									-
								</template>
								<template v-if="item.changeType == 13">
									+
								</template>
								{{ item.changeAmount }}
							</view>
						</view>
						<view class="j-b-r-describe j-b-r-de">
							<view class="j-b-r-text">{{ item.createTime }}</view>
							<view class="j-b-r-cal">余额：{{ item.afterAmount }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" bg-color="#f3f3f3" :margin-bottom="20" :load-text="loadText" />
	</view>
</template>

<script>
const _ = require('lodash');
export default {
	data() {
		return {
			status: 'nomore',
			loadText: {
				loadmore: '轻轻上拉',
				loading: '努力加载中',
				nomore: '没有数据啦'
			},
			params: {
				page: 0,
				rows: 10
			},
			balanceInfo: {
				totalAmount: '',
				record: []
			}
		};
	},
	onLoad() {
		// 用户资金-查询用户余额总额及记录
		this.pullUp('up');
	},
	onReachBottom() {
		// 上拉加载查询精选商品
		this.pullUp('up');
	},
	onPullDownRefresh() {
		// 下拉刷新查询精选商品
		this.dropDown();
	},
	methods: {
		// 下拉刷新
		dropDown() {
			// 修改当前view的数据
			this.params.page = 1;
			// 加载下拉刷新的数据
			this.postFindUserBalance('down');
		},
		// 上拉加载
		pullUp() {
			// 增加页数
			this.params.page++;
			// 请求获取精品推荐商品数据
			this.postFindUserBalance('up');
		},
		// 用户资金-查询用户余额总额及记录
		postFindUserBalance(type) {
			this.$u.api
				.postFindUserBalance(this.params)
				.then(res => {
					console.log(res, '[余额页面-查询用户余额总额及记录]');
					this.balanceInfo.totalAmount = res.data.totalAmount;

					uni.stopPullDownRefresh();
					if (res.data.record.rows.length) {
						// 如果是上拉加载
						if (type == 'up') {
							// 判断分页
							if (this.params.page <= res.data.record.totalPage) {
								this.balanceInfo.record.push(...res.data.record.rows);
								// console.log(this.balanceInfo.record);
								this.status = 'loading';

								// 如果数量小于页容量，显示没有更多数据
								if (res.data.record.rows.length < this.params.rows) {
									this.status = 'nomore';
								}
							} else {
								this.params.page = res.data.record.totalPage;
								this.status = 'nomore';
							}
						}

						// 如果是下拉刷新
						if (type == 'down') {
							// 判断第一页的数据与当前view的页容量内数据有没有一样的，如果没有一下的将数据放在数组第一位
							let arrNew = this.balanceInfo.record.slice(0, this.params.rows);

							// 去除两个数组重复的数据
							let mix = _.differenceBy(res.data.record.rows, arrNew, 'userCapitalRecordId');
							// 如果有新数据，将新数据和现有的数据连接到一起，新数据在前，老数据在后
							let arr = _.concat(mix, this.balanceInfo.record);

							this.balanceInfo.record = arr;

							// 删除页容量个数之后的数据
							this.balanceInfo.record.splice(this.params.rows, arr.length - this.params.rows);
						}
					} else {
						this.status = 'nomore';
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 跳转充值页面
		toRecharge() {
			uni.navigateTo({
				url: './recharge'
			});
		},
		// 跳转充值页面
		toWithdrawal() {
			uni.navigateTo({
				url: './withdrawal'
			});
		}
	}
};
</script>

<style>
page {
	background-color: #f3f3f3;
}
</style>
<style scoped lang="scss">
.j-b-r {
	background: rgba(255, 255, 255, 1);
	border-radius: 14rpx;

	.j-b-r-title {
		padding: 30rpx 25rpx;
		display: flex;
		align-items: center;

		.j-b-r-division {
			width: 6rpx;
			height: 34rpx;
			background: linear-gradient(180deg, rgba(254, 208, 0, 1), rgba(254, 189, 0, 1));
		}

		.j-b-r-text {
			margin-left: 20rpx;
		}
	}

	.j-b-r-row {
		padding: 25rpx;
		border-top: 1rpx solid #f1f1f1;

		&:first-of-type {
			border: 0;
		}

		.j-b-r-describe {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.j-b-r-text {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
				width: 400rpx;
			}

			.j-b-r-val {
				width: 240rpx;
				text-align: right;
			}

			&.j-b-r-de {
				color: #797979;
				font-size: 24rpx;
			}
		}
	}
}

.j-balance {
	.j-b-t-box {
		padding: 25rpx;

		.j-b-total {
			padding: 50rpx 30rpx 40rpx 30rpx;
			background: linear-gradient(90deg, rgba(254, 208, 0, 1), rgba(254, 189, 0, 1));
			border-radius: 14rpx;

			.j-b-t-title {
				color: #333333;
			}

			.j-b-t-value {
				display: flex;
				align-items: center;
				margin-top: 10rpx;
				justify-content: space-between;

				.j-b-t-v-price {
					font-size: 52rpx;
					font-weight: bold;
				}

				.j-b-t-v-ope {
					display: flex;
					align-items: center;

					.j-b-t-v-o-btn {
						width: 121rpx;
						height: 62rpx;
						display: flex;
						color: #ffffff;
						align-items: center;
						justify-content: center;
						background-color: #935915;
						border-radius: 50rpx;
						margin-left: 20rpx;

						&:first-of-type {
							margin-left: 0;
						}
					}
				}
			}
		}

		.j-b-bill {
			margin-top: 20rpx;
		}
	}
}
</style>
